<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :exportApiName="exportApiName"
                :templateDownloadApiName="templateDownloadApiName"
                :importApiName="importApiName"
                :showAttrs="showAttrs"
                :optionWidth="250"
    >
      <template v-slot:foot="{scope}">
        <el-tooltip class="item" effect="dark" content="价格统计" placement="bottom" :hide-after="1800" :open-delay="800">
          <el-button size="small" type="warning" @click="openChartDialog({boxInfoId: R.path(['row', primaryKey], scope)})">
            价格统计
          </el-button>
        </el-tooltip>
      </template>
    </table-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <normal-chart-dialog ref="charDialog"
                         :chartSearchObj="chartSearchObj"
                         :commitChartSearch="commitChartSearch"
    >
      <template v-slot:chart="{chart}">
        <chart ref="chart"></chart>
      </template>
    </normal-chart-dialog>
  </div>
</template>

<script>
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'
import AddOrUpdate from './boxinfo-add-or-update'
import chart from '@/views/charts/box/boxPriceLineChart'

export default {
  mixins: [basicMixins],
  data() {
    return {
      chartSearchObj: {
        dataForm: {
          dateTimeRange: []
        },
        config: {
          dateTimeRange: {
            type: 'date',
            clearable: true,
            dateType: 'daterange',
            label: '时间范围'
          }
        }
      },
      searchAttrs: {
        boxNo: {
          label: '纸箱编号',
          clearable: true,
          placeholder: '请输入纸箱编号'
        },
        bodySize: {
          label: '箱体尺寸',
          placeholder: '请输入箱体尺寸'
        },
        dateTimeRange: {
          type: 'date',
          label: '时间范围',
          dateType: 'daterange',
          clearable: true
        }
      },
      primaryKey: 'id',
      listApiName: 'boxApi/listBoxInfoList',
      deleteApiName: 'boxApi/deleteBoxInfo',
      exportApiName: 'boxApi/getBoxInfoExport',
      saveAuthName: 'box:boxinfo:save',
      deleteAuthName: 'box:boxinfo:delete',
      templateDownloadApiName: 'boxApi/templateDownloadBoxInfo',
      importApiName: 'boxApi/importBoxInfo',
      showAttrs: {
        boxNo: {
          label: '纸箱编号'
        },
        bodySize: {label: '箱体尺寸'},
        parrySize: {label: '格挡尺寸'},
        spacerSize: {label: '垫片尺寸'},
        spacerNumber: {label: '配套垫片'},
        parryNumber: {label: '配套格挡'},
        pieceNumber: {label: '每箱只数', type: 'tag'},
        addBoxNoCount: {label: '入库数量'},
        leaveBoxNoCount: {label: '出库数量'},
        residueBoxNoCount: {label: '剩余纸箱', type: 'tag'},
        residueParryNumberCount: {label: '剩余格挡', type: 'tag'},
        residueSpacerNumberCount: {label: '剩余垫片', type: 'tag'},
        orderDetailNo: {label: '订单编号',width:120},
        clientName: {label: '客户'},
        location: {label: '位置'},
        remark: {label: '备注'},
        status: {
          label: '状态',
          type: 'radio',
          items: [
            {value: 0, text: '禁用', tagType: 'danger'},
            {value: 1, text: '正常'}
          ]
        }
      }
    }
  },
  components: {
    AddOrUpdate,
    tableView,
    chart
  }
}
</script>

